<template>
  <div>
    <h3>App</h3>
    <p>count: {{count}}</p>
    <p>bigCount:{{bigCount}}</p>
    <p>school: {{school}}</p>
    <p>school: {{bigSchool}}</p>

    <button @click="jian">-</button>
    <select name="" id="" v-model.number="num">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="jia">+</button>
    <p><button @click="jiaJiShu">和为奇数的时候+</button></p>
    <p><button @click="wait">1秒后 + </button></p>
  </div>
</template>

<script>
import {mapState} from 'vuex'
// console.log('mapState: ', mapState)
// // 方式一：
// const res = mapState({
//     count:'count',
//     school:'school'
// })
// console.log('res: ' ,res)

export default {
    name:"App",
    data(){
        return {
            num:1
        }
    },
    computed:{
        // mapState作用：将vuex中的state数据，映射为vc的计算属性
        // 方式一：参数是对象
        // ...mapState({
        //     count:'count',
        //     school:'school'
        // }),

        // 方式二：参数是数组
        ...mapState(['count', 'school']),

        // 将仓库的 state 属性和 getters【计算属性】都变成 vc的计算属性，就可以在模板中方便的使用了
        // 因为计算属性会代理到vc身上
        // count:function(){
        //     return this.$store.state.count
        // },
        bigCount(){
            return this.$store.getters.bigCount
        },
        // school:function(){
        //     return this.$store.state.school
        // },
        bigSchool(){
            return this.$store.getters.bigSchool
        }
    },
    mounted(){
        console.log('App this: ', this)
    },
    methods:{
        jian(){
            // this.$store.dispatch('decrement', this.num)
            // 直接通过mutation修改数据【actions没有业务逻辑和异步操作时】
            this.$store.commit('DECREMENT', this.num)
        },
        jia(){
            // this.$store.dispatch('increment', this.num)
            this.$store.commit('INCREMENT', this.num)
        },
        jiaJiShu(){
            this.$store.dispatch('incrementOdd', this.num)
        },
        wait(){
            this.$store.dispatch('wait', this.num)
        }
    }
}
</script>

<style>

</style>